<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center{
    padding: 70px 0;
    border: 3px solid green;
}
</style>
</head>
<body>
    <h2>垂直居中</h2>
    <p>以上实例，我们使用padding属性实现元素的垂直居中:</p>
    <div class="center">
        <p>我是垂直居中的。</p>
        </div>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center{
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}
</style>
</head>
<body>
    <h2>centering</h2>
    <p>以下实例，我们使用padding和text-align让div元素的水平和垂直方向都居中。</p>
    <div class="center">
        <p>我是水平和垂直都居中的。</p>
        </div>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center{
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
.center p{
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>
<body>
    <h2>居中</h2>
    <p>以下实例中我们让line-height属性值和height属性值相等来设置div元素居中。</p>
    <div class="center">
        <p>我是垂直居中的。</p>
    </div>
    </body>
</html>